<template>
	<view>
		<navbar title="开通会员" :back="true" color="#fff" leftIconColor="#fff"/>
		<view class="head">
			<view style="color: #fff;font-size: 22rpx;display: flex;justify-content: space-between;align-items: center;padding:0 20rpx 20rpx;">
				<view style="font-size: 26rpx;">开通会员</view>
				<view style="display: flex;align-items: center;color: #fff;" @click="popShow=true">说明
				 <u-icon name="arrow-right" color="#fff" size="11"></u-icon>
				</view>
			</view>
			<u-popup :show="popShow" @close="popShow=false" :closeOnClickOverlay='true' mode="center" :round="10" :safeAreaInsetBottom='false' :customStyle='Style'>
						<view style='width: 600rpx;height: 800rpx;overflow:scroll;border-radius: 20rpx;'>
			               <image :src="illustrate" mode="widthFix" style="width: 100%;border-radius: 20rpx;"></image>
			            </view>
						<view style="text-align: center;margin-top: 20rpx;">
							<image src="../../../static/images/x.png" mode="" style="width: 50rpx;height: 50rpx;"
								@click="popShow = false"></image>
						</view>
			</u-popup>
			
			<view class="user">
				<view style="display: flex;justify-content: space-between;align-items: center;color: #643a26;padding:40rpx 60rpx;border-radius: 20rpx;background-size: 100%;background-repeat: no-repeat;background-image: url('https://cdn.zhanyan.co/image/admin/2023/08/07/532a815b33644701a25488d2554de116g8qy1mnmf1.png');">
					<view v-if="!userInfo.isVip">
						<view style="font-size: 28rpx;font-weight: 650;">未开通</view>
					</view>
					<view v-else>
						<view style="font-size: 28rpx;font-weight: 650;">已开通</view>
						<view style="font-size: 22rpx;color: #999999;margin-top: 10rpx;">到期时间: {{userInfo.vipTime}}</view>
					</view>
					<view style="text-align: center;">
						<image :src="userInfo.avatar" style="width:100rpx;height: 100rpx;border-radius: 50%;display: inline-block;"></image>
						<view style="font-size: 28rpx;">{{userInfo.nickname}}</view>
					</view>
				</view>
			<!-- 	<view style="background-color:rgba(255, 222, 160,.8);padding: 20rpx;display: flex;justify-content: space-between;align-items: center;border-radius:0 0 20rpx 20rpx;">
					<view style="display: flex;align-items: center;color:#643a26;font-size: 28rpx;font-weight: 650;">
						<image src="https://cdn.zhanyan.co/image/admin/2023/08/07/cf0a9e0e07454212bcb3fea31dec2c90naxsm5ds2x.png" style="width: 30rpx;height: 30rpx;"></image>
						<view style="margin-left: 8rpx;">本金:</view>
						<view style="font-weight: 700;">{{userInfo.rechargePrice}}</view>
						<view class="">元</view>
					</view>
					<view style="display: flex;align-items: center;color:#643a26;font-size: 28rpx;font-weight: 650;">
						<image src="https://cdn.zhanyan.co/image/admin/2023/08/07/cf0a9e0e07454212bcb3fea31dec2c90naxsm5ds2x.png" style="width: 30rpx;height: 30rpx;"></image>
						<view style="margin-left: 8rpx;">赠送金:</view>
						<view style="font-weight: 700;">{{userInfo.rechargeLegumes}}</view>
						<view class="">元</view>
					</view>
					<view style="display: flex;align-items: center;color:#643a26;font-size: 28rpx;font-weight: 650;" @click="toming()">
						<view style="margin-left: 8rpx;">消费明细</view>
						<u-icon name="arrow-right" color="#643a26" size="11" :bold='true'></u-icon>
					</view>
				</view> -->
			</view>
		</view>
		<view class="head-item">
		   <view style="display: flex;justify-content: space-between;align-items: center;">
			   <view style="display: flex;align-items: center;margin: 20rpx 0;">
					<view style="width: 8rpx;background-color: #1db2ed;height:28rpx;border-radius: 4rpx;"></view>
					<view style="font-weight: 700;margin-left: 10rpx;">开通会员</view>
			   </view>
			   <view style="padding:14rpx 20rpx;font-size: 24rpx;background-color:#3277fc;color: #fff;border-radius: 30rpx;margin-right: 20rpx;" @click="goOrder()">开通记录</view>
		   </view>
			<view style="display: flex;justify-content: space-between;align-items: center;margin: 20rpx 0;">
				<view style="display: flex;align-items: center;font-size: 24rpx;" v-for="(item,index) in titleList" :key="index">
					<image src="https://cdn.zhanyan.co/image/admin/2023/08/03/f0895a36c5494f40a4dd581615affb5aluhkxfbcse.png" style="width: 30rpx;height: 30rpx;"></image>
					<view style="margin-left: 10rpx;">{{item.title}}</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				<vipPro :tabs='list' @getId="getId"></vipPro>
			</view>
			<view style="margin: 60rpx 0;">
				<kevy :total="list.length" :current='current'></kevy>
			</view>
			<!-- <view class="u-flex u-row-left" style="margin-top: 30rpx;">
		
				<view v-for="(item,index) in list"
					:class="{'item-on':item.id==id,'item':item.id!=id}"
					@click="tab(item.id)">
					<view>
						<view class="text1">{{item.price}}</view>
						<view class="text2">充{{item.payPrice}}元</view>
					</view>
				</view>
		
			</view> -->
			
			<view style="margin:30rpx 0;">
				<u-button customStyle="background-color:#3277fc;color:#fff;borderRadius:40rpx ;" @click="createOrder()">立即开通</u-button>
				<view style="display: flex;font-size: 26rpx;padding: 30rpx 20rpx 0 20rpx;">
					<u-checkbox-group>
						<u-checkbox v-model="checked" shape="circle" @change="check"></u-checkbox>
					</u-checkbox-group>
					
						<view style="color:  #999999;width: 100%;">
							阅读并同意 <text style="color:#85d6f4 ;margin:0 -4rpx;" @tap="goInfo('recharge_agreement')">《会员开通协议》</text>
						</view>
						
						
					
				</view>
			</view>
			<view style="display: flex;align-items: center;">
				<view style="width: 8rpx;background-color: #1db2ed;height:28rpx;border-radius: 4rpx;"></view>
				<view style="font-weight: 700;margin-left: 10rpx;">注意事项</view>
			</view>
			<view style="color: #999999;font-size: 26rpx;">
				<!-- <view style="display: flex;align-items: center;margin-bottom: 20rpx;">
					<image src="https://cdn.zhanyan.co/image/admin/2023/08/03/d4605b3ef9d84585b116973939060bd5fgcgg322ej.png" style="width: 50rpx;height: 50rpx;"></image>
					<view class="">{{msg}}</view>
				</view> -->
			<!-- 	<u-parse class="" :content="msg" :domain="domain"></u-parse> -->
			<u--textarea v-model="msg" placeholder="暂无注意事项" border='none' autoHeight disabled maxlength='-1'></u--textarea>
			</view>
		</view>
		

		
	
		<pay v-model="show" :payPrice="priceGroup.payPrice" :pay="payOrder" :price="priceGroup.totalPrice"
			:postPrice="priceGroup.postPrice" ref="pay" :payTypes="['weixin','alipay']" />
	</view>
</template>

<script>
    import {
		getPriceList,
		createVipOrder,
		payVipOrder
	} from "@/api/make.js"
	import {
		getConfig,
		getGroupValue
	} from "@/api/public.js"
	import {
		STATIC_URL
	} from '@/config/app';
	import navbar from '@/components/baseNavbar.vue'
	import pay from '@/pages/sub/components/pay.vue'
	import vipPro from "@/pages/sub/components/vipPro.vue"
	import kevy from "@/components/kevy.vue"
	var _self;
	export default {
		components: {
			navbar,
			pay,
			vipPro,
			kevy
		},
		data() {
			return {
				flag: false,
				show: false,
				popShow:false,
				checked:false,
				illustrate:'',
				titleList:[],
				domain:'',
			    Style:{
					backgroundColor:'transparent'
				},
				select: {
					0: 0,
					1: 0
				},
				current:0,
                userInfo:{},
				priceGroup: {

				},
				id:'',
				msg:'',
				list: [
					{
						id: 0,
						name: "月卡",
						price: "500.00"
					},
					{
						id: 1,
						name: "季卡",
						price: "800.00"
					},
					{
						id: 2,
						name: "年卡",
						price: "1000.00"
					}
				]
			}
		},
		// computed: {
		// 	// list() {
		// 	// 	return this.params.type == 0 ? this.kList : this.mList
		// 	// },
		// 	discount() {
		// 		if (this.list.length == 0) return 100
		// 		// return this.params.type == 0 ? (this.kList[this.select[0]] == undefined ? 100 : this.kList[this.select[0]]
		// 		// 	.discount) : (this.mList[this.select[1]] == undefined ? 100 : this.mList[this.select[1]].discount)
		// 		return this.list[this.select[this.params.type]].discount
		// 	}
		// },
		onLoad() {
			_self = this
			this.getList()
			this.domain = STATIC_URL;
			getConfig('recharge_image').then((res)=>{
				this.illustrate = res.data.value
			})
			getConfig('recharge_msg').then((res)=>{
				this.msg = res.data.value
				console.log('msg',this.msg)
			})
			getGroupValue('recharge_title').then((res)=>{
				this.titleList = res.data
				console.log('title',this.titleList)
			})
		},
		onShow(){
			this.$store.dispatch("USERINFO", true).then((res) => {
				this.userInfo = res
				console.log('user',this.userInfo);
				
			});
		},
		methods: {
			previewImg(photoImg) {
				let imgsArray = [];
				imgsArray[0] = photoImg;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			toming(){
				uni.navigateTo({
					url:'/pages/sub/user/record'
				})
			},
			goOrder(){
				uni.navigateTo({
					url:'/pages/sub/user/rechorder'
				})
			},
			goInfo(name) {
				uni.navigateTo({
					url: "/pages/sub/user/settingInfo?name=" + name + "&title=会员开通协议"
				})
			},
			check(e) {
				console.log(e);
				this.checked = e
			},
			getList() {
				getPriceList().then(res => {
					this.list = res.data
					this.id = this.list[0].id
					console.log('chongz',this.list);
				})
			},
			
			//  click(item) {
			//                 this.params.type = item.type
			// 				this.getList()
			//             },
			getId(obj) {
				console.log('窜',obj);
				this.current = obj.index
				this.id = obj.id
			},
			// change(type) {
			// 	if (this.params.type == type) return
			// 	this.params.type = type
				
			// },
			goResult(id, payType) {
				uni.showToast({
					title: "支付成功",
					icon: 'none'
				})
			},
			createOrder() {
			  if(this.checked){
				  if (this.id == "") {
				  	return uni.showToast({
				  		title: '未选择开通套餐',
				  		icon: 'none'
				  	})
				  }
				  createVipOrder({
				  	itemId: this.id
				  }).then(res => {
				  	console.log(res.data)
				  	this.priceGroup = res.data
				  	this.oid = res.data.orderId
				  	this.$refs.pay.open()
				  
				  })
			  }else{
				  uni.showToast({
				  	title: '请先同意会员开通协议',
				  	icon: 'none'
				  })
			  }
				
				
			},
			payOrder(payType) {
				_self.$refs.pay.close()
				payVipOrder({
					orderId: _self.oid,
					payType: payType
				}).then(res => {
					let orderId = _self.oid
					if (parseFloat(res.data.payPrice) <= 0) {
						_self.goResult(orderId, 'none')
						return
					}
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.jsConfig.timeStamp,
						nonceStr: res.data.jsConfig.nonceStr,
						package: res.data.jsConfig.packages,
						signType: res.data.jsConfig.signType,
						paySign: res.data.jsConfig.paySign,
						success: function(res1) {
							_self.goResult(orderId, 'weixin', _self.fun, res.data.isPingOnly)
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss">
  page{
	  height: 100%;
	  font-size: 32rpx;
	  background-color: #ffffff;
  }
  /deep/.u-textarea--disabled{
  	background-color: #fff !important;
  }
</style>
<style scoped lang="scss">

	/deep/.u-icon--right.data-v-172979f2{
		flex-direction:column
	}
	.head {
		background-color:#3277fc;
		position: relative;
		padding: 20rpx;
		padding-bottom: 160rpx;
	}
    .user{
		position: absolute;
		top:73rpx;
		width: 95%;
	}
	.head-item {
		margin-top: 80rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.select-on {
		font-size: 30rpx;
		font-weight: 500;
	}

	.select {
		font-size: 36rpx;
		font-weight: bold;
	}

	.item {
		width: 220rpx;
		text-align: center;
		border: 1rpx solid #ccc;
		margin: 0 10rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}

	.item-on {
		width: 220rpx;
		text-align: center;
		margin: 0 10rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
		border: 1rpx solid #55aaff;
	}

	.text1 {
		font-size: 30rpx;
		line-height: 50rpx;
		font-weight: bold;
		color: #03aeed;
	}

	.text2 {
		font-size: 30rpx;
		line-height: 50rpx;
	}

	.text3 {
		font-size: 28rpx;
		color: #101010;
	}

	.text4 {
		font-size: 28rpx;
		color: #F60606;
	}

	.text5 {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
	}

	.content {
		padding: 20rpx;
		background-color: #FFF;
		border-radius: 10rpx;
		margin-top: -70rpx;
	}

	.text7 {
		font-size: 30rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.image {
		width: 70rpx;
		height: 70rpx;
	}

	.btn {
		border-radius: 0;
		line-height: 60rpx;
		width: 100%;
		box-sizing: inherit;
		padding: 0rpx;
		border: none;
		background: #FFF;
	}

	.btn::after {
		border: none;
	}
</style>
